import React from "react";
import style from "./style.module.scss";
import url1 from "../../assets/images/icon/common resource/hdpi/common_nav_message_white_n.png";
import url2 from "../../assets/images/icon/common resource/hdpi/common_nav_message_white_s.png";
import url3 from "../../assets/images/icon/common resource/hdpi/common_nav_message_black_n.png";
import url4 from "../../assets/images/icon/common resource/hdpi/common_nav_message_black_s.png";
import user from "../../assets/images/icon/common resource/hdpi/user.png";
import robot from '../../assets/images/robot-avatar.jpg'
import { useNavigate } from "react-router-dom";
import { useAppSelector } from "../../store/hooks";
interface PropsType {
  title?: JSX.Element | React.ReactElement | React.ReactNode;
  showSearch?: boolean;
  show?: boolean
}

export const MyHeader: React.FC<PropsType> = ({
  title,
  showSearch = false,
  show = false
}) => {
  const navigate = useNavigate();
  
  const headPic = useAppSelector((state) => state.user.userInfo.headPic);
  const isLogin = useAppSelector((state) => state.user.isLogin);

  return (
    <div className={style["header"]}>
      <div className={style["left"]}>
        <img src={headPic || user} alt="" onClick={() => isLogin ? navigate("/my") : navigate("/login")} />
      </div>
      <div className={style["con"]}>
        {showSearch ? (
          <input
            type="text"
            placeholder="病证、药品名称、医生姓名"
            className={style["input"]}
            onFocus={() => navigate("/home/search")}
          />
        ) : (
          title
        )}
      </div>
      <div className={style["right"]}>
        <img src={url3} alt="" onClick={() => navigate('/my/message')}/>
      </div>
      <div className={style["right"]}>
        <img src={robot} alt="" onClick={() => navigate('/chat/login')}/>
      </div>
      {/* <img src={robot} alt="" style={{ display: show ? 'block': 'none', width:  }}/> */}
    </div>
  );
};

export default MyHeader;
